<template>
  <div class="sub-tab">
    <div class="border-bottom">
      <div class="tab-row" v-show="currentMainTab.sub.length" v-for="(group, index) in currentMainTab.sub" :key="index">
        <div class="cate">{{group.cate}}</div>
        <div class="tabs" v-if="group != undefined">
          <div 
            class="tab"
            :class="item.id == currentMainTab.currentSubId ? 'active' : ''"
            v-for="item in group.tabnames"
            :key="item.id"
            @click="handleClick(item.id, item.context, item.components)"
          >
            {{item.context}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
import Switches from '@/components/base/switches/switches'
export default {
  components: {
    Switches,
  },
  props: {
    currentMainTab: {
      type: Object,
      default: function() {
        return {/*
        
        */}
      }
    }
  },
  data() {
    return {
      // 快速选择
      showButtons: false,
      // 快速选择disabled
      fastchooseDisabled: false,
      // 整合disabled
      integrateDisabled: false
    }
  }, 
  mounted() {
    let defaultComponent = this.currentMainTab.currentComponent
    let defaultSubTab = {subTabName: this.currentMainTab.currentSubTab, id: this.currentMainTab.currentSubId}
    this.setCurrentTab(defaultSubTab)
    this.setCurrentComponent(defaultComponent)
  },

  methods: {
    handleClick(id, subTabName, componentName) {
      //保存当前玩法到state中
      this.setCurrentTab({subTabName, id})
      // 保存当前点击标签的对应的组件名称
      this.setCurrentComponent(componentName)
      // 根据当前标签的id确认高亮
      this.$emit('click', subTabName, id, componentName)
    },
    handleShowingState(showing, disabled) {
      this.showButtons = showing
      this.integrateDisabled = disabled
    },
    handleToggleDisabled(disabled) {
      this.fastchooseDisabled = disabled
    },
    ...mapMutations('lottery', {
      setCurrentTab: 'SET_CURRENT_TAB',
      setCurrentComponent: 'SET_CURRENT_COMPONENT'
    })
  },
  computed: {
    // 六合彩subtab下的选项
    extras() {
      return this.currentMainTab.currentextras
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .sub-tab
    width 100%
    box-sizing border-box
    .tab-row
      display flex
      line-height 36px
      height 36px
      margin 0 20px
      font-weight bold 
      color rgba(43,48,66,1)
      align-items center
      .cate 
        font-size 15px
        font-weight 700
        margin-right 20px
        color $color-theme-dark
      .tabs 
        display flex
        align-items center
        .tab
          height 24px
          padding 0 10px
          line-height 24px 
          text-align center
          vertical-align middle
          color $color-theme-dark
          cursor pointer
          &.active 
            color #fff
            border-radius 3px
            font-weight 700
            background rgba(224,40,40,1)
            box-shadow 0px 1px 0px 0px rgba(224,224,224,1)
      .switch-component 
        margin-right 20px

</style>
